<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->		
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
	    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />	
	<style type="text/css">
.bLeft_list{}
.flex{display: flex;}
.bLeft_list_tit{height:36px;border-bottom:#e6e6e6 solid 1px;padding-left:17px;}
.bLeft_list_tit p{width:16px;height:16px;padding-top:8px;margin:0 5px;}
.bLeft_list_tit p img{width:16px;height:16px;}

.bLeft_list_items{overflow-y:scroll;overflow-x:hidden;}
.bLeft_list_items li{overflow: hidden;position: relative;padding:5px 0 5px 5px;}
.bLeft_list_items li.online{background:#d9d9d9;border-bottom:#cdcdcd solid 1px;}
.bLeft_list_items li.on{height:47px;background:#393d49;padding-top:13px;color:#fff;}
.bLeft_list_items li.on article{width:34px;height:34px;}
.bLeft_list_items li.on article img{width:34px;height:34px;border-radius:3px;}
.bLeft_list_items li.on p{color:#fff;}
.bLeft_list_items li.on i{bottom:10px;}
.bLeft_list_items li article{width:22px;height:22px;}
.bLeft_list_items li article img{width:34px;height:34px;border-radius:3px;}
.bLeft_list_items li p{padding-left:15px;;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;color:#2c3b5d;line-height:34px}

	</style>
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>
		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">				
				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row" style="height: 30px;">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="../index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>商品品牌</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- FORMS QUERY-->
							<div class="row">
							<div class="col-md-12">
								<div class="row">
									<div class="col-md-12">
										<div class="box border primary">
											<div class="box-title">
												<h4><i class="fa fa-bars"></i>查询条件</h4>
											</div>
											<div class="box-body big" style="padding:10px;">												
												<form class="form-horizontal" >
												  <div class="form-group mrg-bt10">
												  <label class="col-sm-1 control-label" style="width: auto">昵称：</label>
													<div class="col-sm-2">
													  <input type="text" class="form-control" name="q" placeholder="请输入昵称">
													</div>
																			
													<div class="col-sm-1">
									       				<a class="btn btn-primary search">查询</a>
													</div>
												  </div>
												 </form>
											</div>
										</div>
									</div>
								</div>		
						    </div>
						</div>
							<!-- /FORMS QUERY -->
							

							<div class="row">
								<!-- TABLES -->
								<div class="col-md-12">
									<div class="row">
									 <div class="col-md-4 ">
										<div class="box border primary">
											<div class="box-title ">
												<h4><i class="fa fa-bars"></i>用户</h4>
											</div>
											<div class="bLeft_list_items" style="padding:10px;">
														<ul id="userlist">
														<ul>
													</ul>
												</div>
												
										</div>		
									 </div>
									 <div class="col-md-8">
								<!-- BOX -->
								<div class="box border green chat-window">
									<div class="box-title ">
										<h4><i class="fa fa-comments"></i>聊天记录</h4>
										<span></span>
									</div>
									<div class="box-body big">
										<div class="scroller" data-height="450px" data-always-visible="1" data-rail-visible="1">
											<ul class="media-list chat-list">
												
											</ul>
										</div>
										
									</div>
								</div>
								<!-- /BOX -->
							</div>
									</div>
								</div>
							</div>
							<!-- /TABLES -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
			<input type="hidden" name="MessageId" />
		</section>

		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<!-- JQUERY UI-->
		<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
	
		<!-- INPUT MASK -->
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
		<!-- UNIFORM -->
		<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>
		<script src="../../js/common.js"></script>
		<script>
		var ip='http://192.168.1.104:8084/',id=null;
		if(window.location.host=="houtai.yiigoo.com")
			ip="http://chatapi.yiigoo.com/";
		var Message=function(){
	         var searchUser=function(){
	        	 var q=$("[name=q]").val();
	        	 if(q.trim()==""){
	        		 $.alert("请输入查询内容");
	        		 return false;
	        	 }
	        	 $.ajax({
						type: "post",
						url: ip+"/chat/adminuser/findUserListByAdmin.do?q="+$("[name=q]").val(),
						async: true,					
						dataType:"jsonp",
						success: function(result) {
							if(result.extra!=null){
								$("#userlist").empty();
								$.each(result.extra,function(index,item){
										var li="<li class='flex' id="+item.id+" userName="+item.userName+" level="+item.level+" nickName="+item.nickName+" userType="+item.userType+"><article><img src='"+item.headImageUrl+"'/></article><p>"+item.nickName+"</p></li>";
										$("#userlist").append(li);
								});
								$("#userlist").off().on("click","li",function(){									
									var id=$(this).attr("id");

									var t="个人代理",l="普通会员";
									var headimg=$(this).find("img").attr("src");
									if($(this).attr("userType")!="UserAgent")t="个人推广";
									if($(this).attr("level")!="1")l="女王";
									var nickName=$(this).attr("nickName");
									
									var p="手机号："+$(this).attr("userName")+"--类型："+t+"--会员级别："+l;
									$(".chat-window").find(".box-title>span").html(p);
									
									//获取聊天记录
									 $.ajax({
										type: "post",
										url: ip+"/chat/adminuser/findRecordListByAdmin.do?userId="+id+"&start=1",
										async: true,					
										dataType:"jsonp",
										success: function(result) {
											$(".chat-list").empty();
											$.each(result.extra,function(index,item){
												var icls="pull-left",tcls="pull-right",trueName=item.sendNickName,time=$.getLocalTime(item.createTime);
												var h=headimg;
												if(item.sendNickName!=nickName){
													icls="pull-right";
													tcls="pull-right";													
													h="http://img.yiigoo.com/default/head-women.jpg";
													}
												var msg=item.detailContent;
												if(item.messageType=="Image")
													msg='<img height=100px style="border-radius:0px" src='+ip+'/chat/file/image.do?id='+item.detailContent+'>';
												if(item.messageType=="Product")
													msg='产品名称:'+JSON.parse(item.detailContent).productName;
												if(item.messageType=="Order")
													msg='订单编号:'+JSON.parse(item.detailContent).orderId;
												
														
												var l='<li class="media"><a class='+icls+' href="javascript:;">'+
											     '<img class="media-object" alt="Generic placeholder image" style="width:32px;height:32px" src='+h+'></a>'+
												  '<div class="media-body chat-pop '+icls+'"><h14 class="media-heading" style="color:#5e87b0">'+trueName+'<span class='+tcls+'>'+
												  '<i class="fa fa-clock-o"></i><abbr class="timeago">'+time+'</abbr> </span></h14>'+
												  '<p>'+msg+'</p></div></li>';
												  
												  $(".chat-list").append(l);
												  
												  
											});
										  
											
										}
									 });
									
									});
							
							}
						 
						}
					});
	         
	         }; 
	         	         
	         return {	         
	         init:function(){
	             $(".search").click(searchUser);
	          }
		    }
	      }();
	      
	      $(function(){
	         $("#header").load("../head.html");
	        App.init(); 
	      	Message.init();
	      	      	
	      });
		</script>
		<!-- /JAVASCRIPTS -->
	</body>

</html>